<template>
  <div>
    <NuxtLayout name="backgroud">
      <div class="notes" v-loading="loading">
        <div>
          <NoticeCard />
          <div class="notes-usercard">
            <UserCard/>
          </div>
        </div>
        <ul class="notes-list">
            <li
              v-for="item in notesList"
              :key="item.id"
            >
              <h1 class="kaiti">{{ item.title }}</h1>
              <MdPreview 
                :editorId="state.id" 
                :modelValue="item.content" 
                :theme="state.theme"
                :showCodeRowNumber="state.showCodeRowNumber"
              />
              <div class="kaiti notes-list-footer">
                <p>作者：
                  <span>{{ item.author }}</span>
                  <span>{{ item.address }}</span>
                </p>
                <p>时间：
                  <span>{{ item.createTime }}</span>
                  <span>{{ item.week }}</span>
                  <span>{{ item.weather }}</span>
                </p>
                <p>
                  <span>
                    <svg class="icon" aria-hidden="true">
                      <use :xlink:href="item.system"></use>
                    </svg>
                    {{ item.system.split('-')[1] }}
                  </span>
                  <span>
                    <svg class="icon" aria-hidden="true">
                      <use :xlink:href="item.browser"></use>
                    </svg>
                    {{ item.browser.split('-')[1] }}
                  </span>
                  <span>
                    <i class="iconfont icon-chakan2"></i>
                    {{ item.view }}
                  </span>
                  <span>
                    <i class="iconfont icon-tuijian2"></i>
                    {{ item.like }}
                  </span>
                </p>
              </div>
            </li>
          <div class="notes-more" @click="loadingMore">点击加载更多>></div>
        </ul>
      </div>
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">
import { MdCatalog,MdPreview  } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import { getNoteList } from "../../service/api/note"
import { useNotification } from "naive-ui"
const notification = useNotification()
let loading = ref(false)
const state = reactive({
  theme: 'light',
  id: 'my-editor',
  showCodeRowNumber:true,
});
//随记数据
const notesList = ref()
//分页数据
let pages = reactive({
  pageNo:1,
  pageSize:10
})
//获取随记列表
const getNotes = async() => {
  await nextTick()
  loading.value = true
  try{
    const res:any = await getNoteList(pages)
    const data = res.data._value
    if(data.code == 200){
      notesList.value = data.data
    }
    loading.value = false
    if(data.total <= data.pageSize){
      notification['success']({
        content: '通知',
        meta: '已加载全部文章',
        duration: 2500,
        keepAliveOnHover: true
      })
      document.getElementsByClassName('notes-more')[0].style.display = 'none'
    }
  }catch(err){
    console.log(err)
  }
}
//加载更多
const loadingMore = () => {
  pages.pageSize += 10
  getNotes()
}
const scrollTop = useScrollTop()
watch(scrollTop,() => {
  let el = document.getElementsByClassName('notes-usercard')
  if(scrollTop.value >= 60){
    if(el[0]){
      el[0].style.position = 'fixed'
      el[0].style.top = '80px'
    }
  } else{
    if(el[0]){
      el[0].style.position = ''
    }
  }
})
onMounted(()=>{
  getNotes()
})
</script>
<script lang="ts">
  export default {
    layout:false
  }
</script>
<style scoped lang="scss">
.notes{
  width: 80%;
  margin: 20px auto;
  display: flex;
  &-list{
    width: 100%;
    margin-left: 10px;
    li{
      background-color: rgba($color: #fff, $alpha: .6);
      margin-bottom: 10px;
      padding: 20px;
      border-radius: 6px;
      h1{
        font-size: 24px;
      }
    }
    &-footer{
      display: flex;
      p{
        line-height: 40px;
        span{
          margin-right: 10px;
          font-size: 16px;
          color: #666;
        }
      }
    }
  }
  &-more{
    margin-top: 20px;
    text-align: center;
    font-size: 18px;
    color: $yun-color;
    cursor: pointer;
  }
}
.md-editor-previewOnly{
  background-color: transparent;
  height: auto;
  width: 100%;
 }
</style>